<template>
    <div class="home-container">
        <header>
     {{title}}
        </header>
        <main>

            <router-view></router-view>
        </main>
        <footer>
            <home-tabbar @change="title=$event"></home-tabbar>
        </footer>
    </div>
</template>

<script>
    import HomeTabbar from "../components/HomeTabbar";

    export default {
        name: "home",
        components: {
            HomeTabbar,
        },
        data: function() {
            return {
                title: "猫眼电影"
            };
        }
    };
</script>
<style lang="scss" scoped>
    .home-container {
        display: flex;
        height: 100%;
        flex-direction: column;
        header,
        footer {
            flex: 0;
        }
        main {
            flex: 1;
        }
        header {
            height: 0.5rem;
            background: #e54847;
            text-align: center;
            font-size: 0.2rem;
            line-height: 0.5rem;
            color: #ffffff;
        }
    }
</style>
